<template>
  <div class="page_body" v-loading.fullscreen.lock="loadingKey" :element-loading-text="loadingText">
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item">裁判员</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'RefereeCertificationList' }"
            class="breadcrumb_active_item">注册年审</el-breadcrumb-item>
          <el-breadcrumb-item>注册详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="certification_detail_content">
        <el-row>
          <el-col :span="24">
            <div class="certification_detail_content_item">
              <el-row>
                <el-col :span="24">
                  <div class="certification_detail_content_item_title">
                    注册信息
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">注册年度:</div>
                    <div>{{ certificationinfo.year }}年</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">年审状态:</div>
                    <div>
                      {{
                        formatterAuditStatusFn(certificationinfo.audit_status)
                      }}
                    </div>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">注册等级:</div>
                    <div>{{ formatterLevelFn(certificationinfo.level) }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">注册时间:</div>
                    <div>{{ certificationinfo.created_at }}</div>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">年审时间:</div>
                    <div>{{ certificationinfo.audit_time }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="certification_detail_content_item">
              <el-row>
                <el-col :span="24">
                  <div class="certification_detail_content_item_title">
                    注册详情
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-tabs v-model="activeName">
                    <el-tab-pane label="裁判员注册" name="referee">
                      <div class="detail_content_tab">
                        <el-row>
                          <el-col :span="16">
                            <el-row>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">姓名:</div>
                                  <div>{{ refereeData.name }}</div>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">性别:</div>
                                  <div>{{ refereeData.sex }}</div>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">国籍:</div>
                                  <div>{{ refereeData.country }}</div>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">
                                    政治面貌:
                                  </div>
                                  <div>{{ refereeData.political_status }}</div>
                                </div>
                              </el-col>
                            </el-row>

                            <el-row>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i"
                                  style="font-weight: bold; margin-top: 8px">
                                  常住地址
                                </div>
                              </el-col>
                            </el-row>

                            <el-row>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">省:</div>
                                  <div>{{ refereeData.province }}</div>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">市:</div>
                                  <div>{{ refereeData.city }}</div>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">区:</div>
                                  <div>{{ refereeData.region }}</div>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px; width: 40px">
                                    地址:
                                  </div>
                                  <div style="width: 70%">
                                    {{ refereeData.address }}
                                  </div>
                                </div>
                              </el-col>
                            </el-row>
                          </el-col>
                          <el-col :span="8">
                            <div class="photo_box">
                              <img class="photo_img" v-if="
                                  refereeData.photo != '' &&
                                  refereeData.photo != null
                                " :src="refereeData.photo" @click="imgViewFn(refereeData.photo)" />
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="6">
                            <div class="detail_content_item_line_i" style="font-weight: bold">
                              身份证件
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">证件类型:</div>
                              <div>
                                {{
                                  formatterIdentityTypeFn(
                                    refereeData.identity_type
                                  )
                                }}
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">证件号:</div>
                              <div>{{ refereeData.identity_number }}</div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="16">
                            <div class="detail_content_item_line_i" style="align-items: flex-start">
                              <div style="margin-right: 10px">证件照片:</div>
                              <img class="identity_img" :src="refereeData.identity_up" v-if="
                                  refereeData.identity_up != '' &&
                                  refereeData.identity_up != null
                                " @click="imgViewFn(refereeData.identity_up)" />
                              <img class="identity_img" :src="refereeData.identity_down" v-if="
                                  refereeData.identity_down != '' &&
                                  refereeData.identity_down != null
                                " @click="imgViewFn(refereeData.identity_down)" />
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="6">
                            <div class="detail_content_item_line_i" style="font-weight: bold">
                              补充信息
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">注册所在地:</div>
                              <div>{{ refereeData.register_region }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">民族:</div>
                              <div>{{ refereeData.nation }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">籍贯:</div>
                              <div>{{ refereeData.native_place }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">学历:</div>
                              <div>{{ refereeData.education }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">外语语种:</div>
                              <div>{{ refereeData.foreign_language }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">外语水平:</div>
                              <div>
                                {{ refereeData.foreign_language_level }}
                              </div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">服装尺寸:</div>
                              <div>{{ refereeData.clothes_size }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">鞋码尺寸:</div>
                              <div>{{ refereeData.shoe_size }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">身高:</div>
                              <div>{{ refereeData.height }}CM</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">体重:</div>
                              <div>{{ refereeData.weight }}KG</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i" style="align-items: flex-start">
                              <div style="margin-right: 10px; width: 110px">
                                工作或学习单位:
                              </div>
                              <div style="width: 70%">
                                {{ refereeData.company }}
                              </div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="6">
                            <div class="detail_content_item_line_i" style="font-weight: bold">
                              裁判员信息
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">裁判员等级:</div>
                              <div>
                                {{
                                  formatterLevelFn(refereeData.referee_level)
                                }}
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">现批准年份:</div>
                              <div>{{ refereeData.start_date }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i" style="align-items: flex-start">
                              <div style="margin-right: 10px; width: 80px">
                                现批准单位:
                              </div>
                              <div>{{ refereeData.referee_region }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i" style="align-items: flex-start">
                              <div style="margin-right: 10px; width: 80px">
                                现注册单位:
                              </div>
                              <div>{{ refereeData.register_organization }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i" style="align-items: flex-start">
                              <div style="margin-right: 10px; width: 80px">
                                所属篮协:
                              </div>
                              <div>{{ refereeData.part_basketball_association }}</div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="24">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">执裁经历:</div>
                              <div class="tournament_list">
                                <div class="tournament_box" v-for="(
                                    item, index
                                  ) in refereeData.tournament_shanghai" :key="index">
                                  <div class="tournament_box_title">
                                    赛事: {{ item.year }}{{ item.title }}
                                  </div>
                                  <div class="tournament_box_title">
                                    职务:
                                    {{
                                      item.position.first == 1
                                        ? "主裁判员"
                                        : ""
                                    }}{{
                                      item.position.first == 1 &&
                                      (item.position.assistant == 1 ||
                                        item.position.record == 1)
                                        ? "、"
                                        : ""
                                    }}{{
                                      item.position.assistant == 1
                                        ? "助理裁判员"
                                        : ""
                                    }}{{
                                      item.position.assistant == 1 &&
                                      item.position.record == 1
                                        ? "、"
                                        : ""
                                    }}{{
                                      item.position.record == 1
                                        ? "记录台人员"
                                        : ""
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="24">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">裁判员证件:</div>
                              <img class="identity_img" :src="refereeData.pic_first" v-if="
                                  refereeData.pic_first != '' &&
                                  refereeData.pic_first != null
                                " @click="imgViewFn(refereeData.pic_first)" />
                              <img class="identity_img" :src="refereeData.pic_second" v-if="
                                  refereeData.pic_second != '' &&
                                  refereeData.pic_second != null
                                " @click="imgViewFn(refereeData.pic_second)" />
                              <img class="identity_img" :src="refereeData.pic_third" v-if="
                                  refereeData.pic_third != '' &&
                                  refereeData.pic_third != null
                                " @click="imgViewFn(refereeData.pic_third)" />
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">
                                个人账户开户支行:
                              </div>
                              <div>
                                {{ refereeData.bank_name }}
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">
                                个人账户开户账号:
                              </div>
                              <div>{{ refereeData.bank_account_number }}</div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="会员注册" v-if="certificationinfo.level > 2" name="vip">
                      <div class="detail_content_tab">
                        <el-row>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">姓名:</div>
                              <div>{{ vipData.name }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">性别:</div>
                              <div>{{ vipData.sex }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">籍贯:</div>
                              <div>{{ vipData.native_place }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">学历:</div>
                              <div>{{ vipData.education }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">政治面貌:</div>
                              <div>{{ vipData.political_status }}</div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">电话:</div>
                              <div>{{ vipData.phone }}</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">证件号:</div>
                              <div>{{ vipData.identity_number }}</div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">职务:</div>
                              <div>{{ vipData.position }}</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">工作单位:</div>
                              <div>{{ vipData.company }}</div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="4">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">邮编:</div>
                              <div>{{ vipData.postcode }}</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">常住地址:</div>
                              <div>{{ vipData.address }}</div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="24">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">执裁经历:</div>
                              <textarea class="vip_tournament"
                                v-model="vipData.tournament_experience" disabled></textarea>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>

    <div class="certification_detail_btn_box">
      <el-button type="primary" size="mini" @click="adoptFn()">年审通过</el-button>
      <el-button type="danger" size="mini" @click="failFn()">年审不通过</el-button>
      <el-button type="info" size="mini" @click="backBtn()">返回上一页</el-button>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="true" width="60vw">
      <img :src="dialogImg" class="dialog_img" />
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/referee/certificationDetail.css" scoped></style>

<script>
export default {
  name: "RefereeCertificationDetail",
  components: {},
  data () {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      auditStatusList: [
        {
          key: 1,
          value: "待年审认证",
        },
        {
          key: 2,
          value: "已完成年审认证",
        },
        {
          key: 3,
          value: "年审认证不通过",
        },
      ], // 发布状态
      levelList: [
        {
          key: 1,
          value: "三级",
        },
        {
          key: 2,
          value: "二级",
        },
        {
          key: 3,
          value: "一级",
        },
        {
          key: 4,
          value: "国家级",
        },
        {
          key: 5,
          value: "国际级",
        },
      ], // 等级列表
      identityTypeList: [
        {
          key: 1,
          value: "身份证",
        },
        {
          key: 2,
          value: "护照",
        },
        {
          key: 3,
          value: "港、澳、台胞证件",
        },
        {
          key: 4,
          value: "其他",
        },
      ],
      loadingKey: false,
      loadingText: "",
      certificationinfo: {},
      vipData: {},
      refereeData: {},
      activeName: "referee",
      dialogVisible: false,
      dialogImg: "",
    };
  },
  created: function () {
    let record_id = this.$route.query.id;
    if (record_id != undefined && record_id != "") {
      this.record_id = record_id;
    }
    this.getDataFn();
  },
  methods: {
    // 获取列表数据
    getDataFn: function () {
      let that = this;
      let url = "/admin/refereecertification/show";
      let data = {
        record_id: this.record_id,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.certificationinfo = response.info;
            that.vipData = response.referee_vip;
            that.refereeData = response.referee;
            that.refereeData.level = Number(response.referee.level);
            that.refereeData.tournament_shanghai = JSON.parse(
              response.referee.tournament_shanghai
            );
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },

    // 等级格式化
    formatterLevelFn: function (val) {
      let level = val;
      let text = "";
      this.levelList.forEach(function (item) {
        if (item.key == level) {
          text = item.value;
        }
      });
      return text;
    },
    // 审核状态格式化
    formatterAuditStatusFn: function (val) {
      let status = val;
      let text = "";
      this.auditStatusList.forEach(function (item) {
        if (item.key == status) {
          text = item.value;
        }
      });
      return text;
    },
    // 证件类型格式化
    formatterIdentityTypeFn: function (val) {
      let type = val;
      let text = "";
      this.identityTypeList.forEach(function (item) {
        if (item.key == type) {
          text = item.value;
        }
      });
      return text;
    },
    // 审核通过
    adoptFn: function () {
      let that = this;
      this.$confirm("确认通过该注册申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/admin/refereecertification/audit";
        let data = {
          record_id: this.record_id,
          status: 1,
        };
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("操作成功");
              that.backBtn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 审核不通过
    failFn: function () {
      let that = this;
      this.$confirm("确认拒绝该注册申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/admin/refereecertification/audit";
        let data = {
          record_id: this.record_id,
          status: 2,
        };
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("操作成功");
              that.backBtn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 查看图片
    imgViewFn: function (url) {
      this.dialogVisible = true;
      this.dialogImg = url;
    },
    // 返回上一页
    backBtn: function () {
      this.$router.replace({
        name: "RefereeCertificationList",
      });
    },
  },
};
</script>
